<template>
  <span class="gis-title" v-bind="$attrs">
    <img v-if="logo" :src="logo" alt="logo" />
    {{ title }}
  </span>
</template>

<script>
export default {
  name: 'gis-title',
  props: {
    logo: { default: undefined },
    title: { type: String, default: '智慧系统' },
  },
};
</script>

<style scoped lang="less">
.gis-title {
  position: relative;
  z-index: 2;
  user-select: none;

  background: linear-gradient(to bottom, #ffffff 0%, #8bbfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 42px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 2px 3px rgba(9, 35, 51, 0.21);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
